<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 定时器
		1. 一次性定时器
		2. 周期性定时器 -->
		
		<h1 id="box">正在睡觉</h1>
		<button id="btn">闹铃</button>
		<script>
			let box=document.getElementById("box");
			//1. 创建一个变量来接收定时器
			let timer=null;
			
			btn.onclick=function(){
				if(timer==null){
					//2. 启动定时器  setTimeout(回调函数，时间（毫秒）)
					timer=setTimeout(function(){
						box.innerHTML="已经起床";
						console.log("已经起床");
						//3.停止定时器 clearTimeout(timer)  timer=null;
						clearTimeout(timer);
						timer=null;
					},1000)
				}
			}
			
		</script>
	</body>
</html>
